<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看成绩</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

</head>
<body>
<div id="app">

    <!--搜索表单-->
    <el-form :inline="true" ref="reportSearchForm" :model="reportSearch" class="demo-form-inline"
             @submit.native.prevent>

        <el-form-item label="实验名" prop="reportName">
            <el-input v-model="reportSearch.reportName" placeholder="实验名"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="searchReport" native-type="submit">查询报告</el-button>
            <el-button type="warning" @click="resetSearchReport">重置</el-button>
        </el-form-item>

    </el-form>

    <!--  查看详细弹窗  -->
    <el-dialog
            title="查看详细"
            :visible.sync="dialogVisibleShow"
            width="40%"
            @close="report={};reportScores: {scores: [{question: '',answer: '',point:'',remark:''}]}">
        <el-form ref="showReportForm" :model="report" label-width="80px">
            <el-form-item label="实验名:">
                <div class="sub-title;">{{ report.reportName }}</div>
            </el-form-item>
            <el-form-item label="学号:">
                <div class="sub-title;">{{ report.sno }}</div>
            </el-form-item>
            <el-form-item label="学生姓名:">
                <div class="sub-title;">{{ report.studentName }}</div>
            </el-form-item>
            <el-form-item label="学生班级:">
                <div class="sub-title;">{{ report.studentClass }}</div>
            </el-form-item>
            <el-divider></el-divider>
            <el-form-item v-for="(item,index) in reportScores.scores" v-if="item.question" :key="index">
                问题{{ (index+1) }}：{{ item.question }}
                <br>
                答案{{ (index+1) }}：{{ item.answer }}
                <br>
                小分{{ (index+1) }}：{{ item.point }}
                <br>
                备注{{ (index+1) }}：{{ item.remark }}
                <el-divider></el-divider>
            </el-form-item>
            <el-divider></el-divider>
            <el-form-item label="教师评语:">
                <div class="sub-title;">{{ report.scoreComment }}</div>
            </el-form-item>
            <el-form-item label="总成绩:">
                <div class="sub-title;">{{ report.reportScore }}</div>
            </el-form-item>
        </el-form>
    </el-dialog>
    <br>
    <!--表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                border
        >
            <el-table-column
                    prop="reportName"
                    label="实验名"
                    align="center"
                    sortable
            >
            </el-table-column>

            <el-table-column
                    prop="sno"
                    label="学号"
                    align="center"
                    sortable
            >
            </el-table-column>

            <el-table-column
                    prop="studentName"
                    label="学生姓名"
                    align="center"
                    sortable
            >
            </el-table-column>

            <el-table-column
                    prop="reportScore"
                    label="实验成绩"
                    align="center"
                    sortable
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.reportScore">{{scope.row.reportScore}}</span>
                    <span v-else>未批改</span>
                </template>
            </el-table-column>

            <el-table-column
                    align="center"
                    label="操作">

                <template slot-scope="scope">
                    <el-button type="info" @click="showDetail(scope.row)">查看</el-button>
                    <el-button type="success" @click="inputReport(scope.row)">导出</el-button>
                </template>

            </el-table-column>

        </el-table>
        <!--分页工具条-->
        <el-pagination
                class="pageList"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount"
                :current-page.sync="currentPage"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        >
        </el-pagination>
    </template>
    <br>
</div>

<link rel="stylesheet" href="../../plugins/element-ui/lib/theme-chalk/index.css">
<script src="../../plugins/vue/vue.js"></script>
<script src="../../plugins/element-ui/lib/index.js"></script>
<script src="../../plugins/axios/axios.min.js"></script>

<script>
    //关闭控制台vue的提示
    Vue.config.productionTip = false;
    new Vue({
        el: "#app",
        //页面使用到的数据
        data() {
            return {
                //使用搜索的标志(默认关闭,在搜索一次后开启)
                searchFlag: 0,
                // 每页显示的条数
                pageSize: 10,
                // 总记录数
                totalCount: 0,
                // 当前页码
                currentPage: 1,
                //显示详细
                dialogVisibleShow: false,
                //页面信息
                userInfo: {},
                // 实验模型数据
                report: {
                    id: '',
                    answerFinish:'',
                    reportName: '',
                    reportQuestion: '',
                    reportAnswer:'',
                    scorePoints:'',
                    reportScore: '',
                    scoreRemark: '',
                    scoreComment: '',
                    sno: '',
                    sid: '',
                    studentClass: '',
                    studentName: '',
                },
                //答案模型
                answer: {
                    id: '',
                    sid: '',
                    rid: '',
                    reportAnswer: '',
                    answerFinish: '',
                    answerFile: ''
                },
                //成绩模型
                score: {
                    id: '',
                    sid: '',
                    rid: '',
                    scorePoints:'',
                    reportScore: '',
                    scoreRemark: '',
                    scoreComment: ''
                },
                //成绩列表
                reportScores: {
                    scores: [{
                        question: '',
                        answer: '',
                        point:'',
                        remark:'',
                    }]
                },
                //实验搜索数据模型
                reportSearch: {
                    reportName: '',
                    studentClass: '',
                    sno:'',
                    studentName:''
                },
                // 被选中的id数组
                selectedIds: [],
                // 表格数据(静态数据)
                tableData: [
                    {
                        id: '1',
                        reportName: '1',
                        reportQuestion: '1;2;3;',
                        sno: '1',
                        sid: '1',
                        studentName: '1',
                        studentClass: '1',
                        scorePoints: '1;3;4;',
                        reportScore: '1',
                        scoreRemark: '1;3;5;',
                        scoreComment: '1',
                        reportAnswer: '1;3;',
                        answerFinish: '1'
                    },
                    {
                        id: '1',
                        reportName: '1',
                        reportQuestion: '1',
                        sno: '1',
                        sid: '1',
                        studentName: '1',
                        studentClass: '1',
                        scorePoints: '1',
                        reportScore: '1',
                        scoreRemark: '1',
                        scoreComment: '1',
                        reportAnswer: '1',
                        answerFinish: '1'
                    }
                ],
            }
        },
        mounted() {
            //保存用户数据到当前页面
            const userInfo = window.localStorage.getItem('userInfo')
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo)
            }
            this.selectAll();
        },
        methods: {
            // 查询所有实验数据并分页
            selectAll() {
                //如果使用过搜索功能，就将表格改成搜索的内容
                if (this.searchFlag === 1) {
                    this.searchReport();
                } else {
                    axios({
                        method: "get",
                        url: "/report/selectScoreStu",
                        params: {
                            sid: this.userInfo.id,
                            currentPage: this.currentPage,
                            pageSize: this.pageSize,
                        },
                    }).then(res => {
                        this.tableData = res.data.tableData || [];
                        this.totalCount = res.data.totalCount;
                    }).catch(() => {
                        this.$message({
                            message: '查询失败!已为您加载静态数据',
                            type: 'warning'
                        });
                    })
                }
            },

            // 工具栏查询实验数据
            searchReport() {
                axios({
                    method: "get",
                    url: "/report/searchScoreStu",
                    params: {
                        sid: this.userInfo.id,
                        reportName: this.reportSearch.reportName,
                        currentPage: this.currentPage,
                        pageSize: this.pageSize,
                    }
                }).then(res => {
                    this.tableData = res.data.tableData || [];
                    this.totalCount = res.data.totalCount;
                    this.searchFlag = 1;//搜索成功的标志
                }).catch(() => {
                    this.$message({
                        message: '数据异常！',
                        type: 'warning'
                    })
                })
            },

            //重置查询
            resetSearchReport() {
                this.resetForm('reportSearchForm')
                this.searchFlag = 0
                this.selectAll()
            },

            //显示详细问题
            showDetail(val) {
                this.report = val;
                this.reportScores = {
                    scores: [],
                }
                let q = this.report.reportQuestion.split(';')
                let a = []
                let p = []
                let r = []
                if (this.report.reportAnswer != null){
                    a = this.report.reportAnswer.split(';')
                }
                if (this.report.scorePoints != null){
                    p = this.report.scorePoints.split(';')
                }
                if (this.report.scoreRemark){
                    r = this.report.scoreRemark.split(';')
                }
                for (let i = 0; i < q.length - 1; i++) {
                    let obj = {question: q[i], answer: a[i], point: p[i], remark: r[i]}
                    this.reportScores.scores.push(obj)
                }
                console.log(this.reportScores.scores)
                this.dialogVisibleShow = true;
            },

            //表格颜色，偶数绿色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'success-row';
                }
                return '';
            },

            //设置左侧每次显示多少条信息
            handleSizeChange(val) {
                // 重新设置每页显示的条数
                this.pageSize = val;
                this.selectAll();
            },

            //设置右侧跳转多少页
            handleCurrentChange(val) {
                // 重新设置当前页码
                this.currentPage = val;
                this.selectAll();
            },

            //重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            //导出报告
            inputReport(val) {
                axios({
                    method: "GET",
                    url: "/report/reportInput",
                    params: {
                        sid: val.sid,
                        rid: val.id
                    },
                }).then(res => {
                    this.$message({
                        message: '导出成功！',
                        type: 'success'
                    });
                }).catch(err => {
                    this.$message({
                        message: '数据异常！',
                        type: 'warning'
                    });
                });
            },
        }
    })
</script>
</body>
</html>